<script setup>
import { reactive, ref, onMounted } from 'vue'
import { getDeptList, deptSubmit } from '@/api'
import Form from './component/Form.vue'

const queryForm = ref()

const state = reactive({
  queryForm: {
    deptName: ''
  },
  isShowDialog: false,
  deptList: [],
  deptItem: {}
})

const columns = [
  { label: '部门名称', prop: 'deptName' },
  { label: '负责人', prop: 'userName' },
  { label: '更新时间', prop: 'updateTime' },
  { label: '创建时间', prop: 'createTime' },
]
onMounted(async () => {
  await query()
})

const query = async () => {
  state.deptList = await getDeptList(state.queryForm)
}

const handelCreate = () => {
  state.isShowDialog = true
}
const handelCloseDialog = () => {
  state.isShowDialog = false
  state.deptItem = {}
  query()
}

const handelEdit = (row) => {
  state.isShowDialog = true
  state.deptItem = row;
}
const handelDel = async (_id) => {
  await deptSubmit({
    action: 'delete',
    _id
  })
  await query()
}

</script>
<template>
  <div class="dept-manage">
    <div class="query-form">
      <el-form inline :model="state.queryForm" ref="queryForm">
        <el-form-item prop="deptName">
          <el-input placeholder="请输入部门名称" v-model="state.queryForm.deptName" />
        </el-form-item>
        <el-form-item>
          <el-button @click="query" type="primary">查询</el-button>
          <el-button @click="queryForm.resetFields()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <div class="action">
        <el-button type="primary" @click="handelCreate">创建</el-button>
        <el-table :data="state.deptList" row-key="_id" :tree-props="{ children: 'children' }" stripe>
          <el-table-column v-for="column of columns" :key="column.prop" :prop="column.prop" :label="column.label">
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button @click="handelEdit(scope.row)">编辑</el-button>
              <el-button @click="handelDel(scope.row)" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <Form @closed="handelCloseDialog" :deptItem="state.deptItem" :isShowDialog="state.isShowDialog" />
  </div>
</template>